<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据迁移管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="${ctx.contextPath}/static/thirdJs/vue@2.6.11.min.js"></script>
    <script src="${ctx.contextPath}/static/thirdJs/elementui/element-ui@2.13.2.js"></script>
    <script src="${ctx.contextPath}/static/thirdJs/axios@0.19.2.min.js"></script>
    <script src="${ctx.contextPath}/static/thirdJs/xe-utils@2.4.5.min.js"></script>
    <script src="${ctx.contextPath}/static/thirdJs/polyfill.min.js"></script>
    <link rel="stylesheet"
          href="${ctx.contextPath}/static/thirdJs/elementui/element-ui@2.13.2.css">
    <style>
        [v-cloak] {
            display: none;
        }
        .el-header {
            background-color: #fff;
            color: #333;
            text-align: left;
            height: 15%;
            padding-top: 15px;
        }
        .el-main {
            background-color: #fff;
            color: #333;
            text-align: left;
            height: 80%;
            padding-top: 10px;
        }

        .el-divider--horizontal {
            width: 98%;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 10px;
        }
        .el-dialog__body{
            padding: 10px 10px;
            border: none;
        }
        .el-table td {
            padding: 9px 0;
        }
    </style>
</head>
<body>
<div id="app" style="margin: -10px;background-color: white;width:100%" v-cloak>
    <div style="padding: 10px 0px 0px 10px;">
        <p style="height: 40px; border-bottom: 1px solid #e0e0e0; box-sizing: content-box; line-height: 39px; font-size: 16px;">
            <b style="font-size: 20px; margin: 20px 0px 0px 20px;">数据迁移管理</b>
        </p>
    </div>
    <el-container style="height: 818px;padding-top: 10px">
        <el-header style="height: auto">
            <el-form :inline="true" :model="queryForm" ref="queryForm">
                <el-form-item label="逻辑模型">
                    <el-input v-model="queryForm.logicModel" placeholder="逻辑模型名称"></el-input>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker
                            v-model="queryForm.scrollTime"
                            align="right"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="dateOptions" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="同步状态">
                    <el-select v-model="queryForm.status" clearable placeholder="请选择">
                        <el-option label="同步中" value="1"></el-option>
                        <el-option label="同步完成" value="2"></el-option>
                        <el-option label="同步失败" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryTableDatas" icon="el-icon-search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="showScollAdd" icon="el-icon-refresh">发起全量同步</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main style="height: 695px">
            <el-table  :highlight-current-row="tableConfig.highlightRow"
                      :stripe="tableConfig.stripe" v-loading="loading"
                      :data="tableDatas"  ref="mainTable">
                <el-table-column prop="logicModel" label="逻辑模型名"></el-table-column>
                <el-table-column prop="progressType" :show-overflow-tooltip="true" width="120" label="进度类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.progressType==0">滚动抽数</span>
                        <span v-if="scope.row.progressType==1">核对抽数</span>
                    </template>
                </el-table-column>
                <el-table-column prop="scrollTime" :show-overflow-tooltip="true" label="开始滚动时间" width="250"></el-table-column>
                <el-table-column prop="scrollId" width="145" :show-overflow-tooltip="true" label="当前滚动序号"></el-table-column>
                <el-table-column prop="ticket" width="145" :show-overflow-tooltip="true" label="迁移批次"></el-table-column>
                <el-table-column prop="curTicketStage" :show-overflow-tooltip="true" width="150" label="批次阶段号"></el-table-column>
                <el-table-column prop="finishRecord" :show-overflow-tooltip="true" width="150" label="已完成记录数"></el-table-column>
                <el-table-column prop="retryTimes" :show-overflow-tooltip="true" width="150" label="已重试次数"></el-table-column>
                <el-table-column prop="progressScale" :show-overflow-tooltip="true" width="100" label="同步进度">
                    <template slot-scope="scope">
                        <el-progress :text-inside="true"   :stroke-width="20" :percentage="scope.row.progressScale"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column prop="status" :show-overflow-tooltip="true" width="120" label="迁移状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status==1">同步中</el-tag>
                        <el-tag v-if="scope.row.status==2" type="success">同步完成</el-tag>
                        <el-tag v-if="scope.row.status==3" type="warning">同步失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-tooltip content="重新同步" placement="top" :open-delay=500  v-if="scope.row.status==3">
                            <el-popconfirm placement="left-start" title="你确定要重新同步吗？" @on-confirm="reSync(scope.row)">
                                <el-button slot="reference" type="danger" size="small" round plain>重新同步</el-button>
                            </el-popconfirm>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
    <el-dialog
            :visible.sync="newScrollDialogVisible"
            size="30%" top="15px" :close-on-click-modal="false"
            ref="drawer">
        <span slot="title"><b>发起全量同步</b></span>
        <el-row>
            <el-col>
                <el-form ref="scrollForm" :model="scrollForm"
                         label-width="170px">
                    <el-card class="box-card" style="overflow: auto" shadow="never">
                        <div class="text item">
                            <el-form-item label="目标表名">
                                <el-select v-model="scrollForm.tableName" style="width: 100%"
                                           placeholder="请选择目标表名">
                                    <el-option v-for="tableName in scrollAbleTables" :label="tableName" :value="tableName"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="text item">
                            <el-form-item label="要同步的数据的起始时间">
                                <el-date-picker
                                        v-model="scrollForm.startTime"
                                        type="date"  style="width: 100%"
                                        placeholder="要同步的数据的起始时间"  value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                        <div class="text item">
                            <el-form-item label="要同步的数据的截止时间">
                                <el-date-picker
                                        v-model="scrollForm.endTime"
                                        type="date"  style="width: 100%"
                                        placeholder="要同步的数据的截止时间"  value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-card>
                </el-form>
            </el-col>
        </el-row>
        <el-row style="text-align: center;margin-top: 15px">
            <el-button type="danger" @click="newScrollDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitScrollAdd">提交</el-button>
        </el-row>
    </el-dialog>
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',
        data: function () {
            return {
                dateOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                // 新增全量同步弹窗是否显示
                newScrollDialogVisible: false,
                // 是否显示表格加载中动画
                loading: false,
                // 表格配置
                tableConfig: {
                    border: true,
                    highlightRow: true,
                    showOverflow: true,
                    stripe: true
                },
                // 支持全量同步的表
                scrollAbleTables: ${scrollAbleTables!"null"},
                // 查询表单
                queryForm: {
                    scrollTime: "",
                    status: ""
                },
                // 全量同步表单
                scrollForm: {
                    // 要同步的表名称
                    tableName: '',
                    // 要同步的数据的起始时间
                    startTime: '',
                    // 要同步的数据的截止时间
                    endTime: ''
                },
                tableDatas: []
            }
        },
        methods: {
            // 保存新增全量同步
            submitScrollAdd: function (){
                var _this = this;
                axios.post(
                    "${ctx.contextPath}/migrate/addScroll", _this.scrollForm)
                    .then(function (res) {
                        let responseData = res.data;
                        if ("0" === responseData.resultCode) {
                            _this.$message({
                                message: "新增全量同步成功！",
                                type: "success",
                                offset: 60,
                                // 是否可手动关闭该提示
                                showClose: true,
                                duration: 2000,
                                onClose: function onClose() {
                                    _this.queryTableDatas();
                                    _this.newScrollDialogVisible = false;
                                }
                            });
                        } else {
                            _this.loading = false;

                            _this.$message({
                                message: responseData.resultMsg,
                                type: "error",
                                offset: 60,
                                showClose: true,
                                // 是否可手动关闭该提示
                                duration: 2000
                            });
                        }
                    })
                    .catch(function (err) {
                        _this.loading = false;
                        _this.$message({
                            message: "调用新增全量同步接口时发生错误：" + err,
                            type: "error",
                            offset: 60,
                            showClose: true,
                            // 是否可手动关闭该提示
                            duration: 2000
                        });
                    });
            },
            // 显示发起全量同步弹窗
            showScollAdd: function () {
                this.newScrollDialogVisible = true;
                this.scrollForm = {
                    // 要同步的表名称
                    tableName: '',
                    // 要同步的数据的起始时间
                    startTime: '',
                    // 要同步的数据的截止时间
                    endTime: ''
                }
            },
            // 重新同步
            reSync: function (row)
            {
                var _this = this;
                axios.post("${ctx.contextPath}/migrate/reSync?id=" + row.id, null)
                    .then(function(res) {
                        _this.queryTableDatas();
                    })
                    .catch(function() {
                    });
            },
            // 查询表格信息
            queryTableDatas: function ()
            {
                this.findTableDatas();
            },
            // 异步获取表格信息List
            findTableDatas: function ()
            {
                var _this = this;

                // 调用后台接口
                this.loading = true;
                axios
                    .post(
                        "${ctx.contextPath}/migrate/getEtlProgresses", this.queryForm)
                    .then(function(res) {
                        var responseData = res.data;

                        if ("0" === responseData.resultCode)
                        {
                            _this.tableDatas = responseData.resultList;
                        }
                        else
                        {
                            _this.$message({
                                message: responseData.resultMsg,
                                type: "error",
                                offset: 60,
                                showClose: true,
                                // 是否可手动关闭该提示
                                duration: 2000
                            });
                        }
                        _this.loading = false;
                    })
                    .catch(function(err)
                    {
                        _this.loading = false;

                        _this.$message({
                            message: "取得迁移进度信息失败：" + err,
                            type: "error",
                            offset: 60,
                            showClose: true,
                            // 是否可手动关闭该提示
                            duration: 2000
                        });
                    });
            }
        },
        created: function (){
            this.queryTableDatas();
        }
    })
</script>
</html>